<template>
  <div class="goods">
    <page-content :contentConfig="pageContentConfig" pageName="goods" headerBntTxt="新建商品">
      <template #status="{ prop }">
        <!-- 状态 -->
        <el-button :type="prop.status === 1 ? 'warning' : 'success'" size="small">{{
          statusButton(prop.status)
        }}</el-button>
      </template>
      <template #oldPrice="{ prop }">
        <span v-FPrice="priceFormat">{{ prop.oldPrice }}</span>
      </template>
      <template #newPrice="{ prop }">
        <span v-FPrice="priceFormat">{{ prop.newPrice }}</span>
      </template>
      <template #imgUrl="{ prop }">
        <el-image
          style="width: 80px; height: 80px"
          :src="prop.imgUrl"
          fit="cover"
          :preview-src-list="[prop.imgUrl]"
          preview-teleported
        />
      </template>
      <template #operate>
        <el-button type="primary" :icon="Edit" size="small" />
        <el-button type="danger" :icon="Delete" size="small" />
      </template>
    </page-content>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import pageContent from '@/base-ui/page-content'
import { pageContentConfig } from './config/table-config'
import { Edit, Delete } from '@element-plus/icons-vue'

export default defineComponent({
  name: 'goods',
  components: {
    pageContent
  },
  setup() {
    const statusButton = (status: number) => {
      return status === 1 ? '下架' : '上架 '
    }
    const priceFormat = '￥'
    return {
      pageContentConfig,
      statusButton,
      Edit,
      Delete,
      priceFormat
    }
  }
})
</script>

<style scoped></style>
